<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

  <script>
  import * as echarts from 'echarts'
  import resize from '../mixins/resize'
  import { Decimal } from 'decimal.js'

  export default {
      mixins: [resize],
      props: {
          className: {
              type: String,
              default: 'chart'
          },
          width: {
              type: String,
              default: '100%'
          },
          height: {
              type: String,
              default: '300px'
          },
          chartData: {
            type: [Object, Array],
            default: () => {
              return []
            }
          }
      },
      data() {
          return {
            chart: null,
            loading: true
          }
      },
      watch: {
        chartData() {
              this.initChart()
          }
      },
      mounted() {
          this.$nextTick(() => {
              this.initChart()
          })
      },
      beforeDestroy() {
          if (!this.chart) {
              return
          }
          this.chart.dispose()
          this.chart = null
      },
      methods: {
          initChart() {
              this.loading = true
              this.chart = echarts.init(this.$el, 'macarons')
            if (this.chartData) {
              this.chartData.forEach((item) => {
                item.name = item.nodeName
                item.barWidth = 25
                item.type = 'bar'
                item.stack = '1'
                item.data = [item.count]
                item.emphasis = {
                  disabled: true,
                  focus: 'none'
                }
              })
            }
            this.chart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: ''
                },
                formatter: (value) => {
                  var format = ''
                  value.forEach(item => {
                    format += '<p style="padding: 0;margin: 0;margin-bottom: 5px!important;">' + item.marker + item.seriesName + ': ' + item.value + '/' + this.moneyFormat(this.chartData[item.seriesIndex].amount, 'w', 2, true) + '</p>'
                  })
                  return format
                }
              },
              legend: {
                type: this.chartData.length > 10 ? 'scroll' : '',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                  fontSize: 12,
                  color: 'rgba(0, 0, 0, 0.38)'
                },
                orient: 'horizontal',
                top: 0,
                left: -5
              },
              grid: {
                top: '25%',
                left: 0,
                right: 0,
                bottom: 5,
                containLabel: false
              },
              xAxis: [
                {
                  type: 'value',
                  show: false
                }
              ],
              yAxis: [
                {
                  type: 'category',
                  show: false
                }
              ],
              color: ['rgba(67, 78, 184, 1)', 'rgba(95, 105, 228, 1)', 'rgba(43, 142, 243, 1)', 'rgba(20, 201, 201, 1)', 'rgba(113, 213, 248, 1)', 'rgba(255, 223, 128, 1)', 'rgba(247, 186, 30, 1)', 'rgba(255, 99, 11, 1)', 'rgba(200, 49, 0, 1)', 'rgba(234, 172, 255, 1)', 'rgba(199, 62, 255, 1)', 'rgba(133, 0, 255, 1)', 'rgba(57, 0, 229, 1)'],
              series: this.chartData
            })

            var _this = this
            this.chart.on('legendselectchanged', function(params) {
              var sumCount = new Decimal(0)
              var sumAmount = new Decimal(0)
              for (var key in params.selected) {
                if (params.selected[key]) {
                  if (_this.$parent.dashboardInfo && _this.$parent.dashboardInfo.executeDeal) {
                    var filterData = _this.$parent.dashboardInfo.executeDeal.find(node => node.nodeName === key)
                    if (filterData) {
                      sumCount = sumCount.add(new Decimal(filterData.count))
                      sumAmount = sumAmount.add(new Decimal(filterData.amount))
                    }
                  }
                }
              }
              _this.$parent.totalCount = sumCount.toNumber()
              _this.$parent.totalAmount = sumAmount.toNumber()
            })

            this.chart.on('click', function(params) {
              _this.$parent.getNodeDeal(params.seriesName)
            })
            this.loading = false
          }
      }
  }
  </script>

